<template>
  <div class="footer">
    <button class="button" @click="cancelOeder">{{this.sureCarpool}}</button>
  </div>
</template>

<script>

// 引入这个页面需要的方法
import {mapMutations, mapGetters} from 'vuex'
export default {
  data () {
    return {
      sureCarpool: '取消定单'
    }
  },
  computed: {
    ...mapGetters([
      'time'
    ])
  },
  methods: {
    // 点击取消订单的时候触发
    cancelOeder () {
      this.setShowNoCall(true)
    },
    ...mapMutations({
      setShowNoCall: 'SET_SHOWNOCALL',
      setTime: 'SET_TIME'
    })
  }
}
</script>

<style  scoped lang="stylus" rel="stylesheet/stylus">
.footer
  position: fixed
  bottom: 0
  left: 50%
  margin-left: -177px
  width: 355px
  .button
    width: 100%
    height: 50px
    z-index: 10000
    margin-bottom: 10px
    background-color: rgb(51, 51, 51)
    color: rgb(255, 255, 255)
    border-radius: 5px
    border: none
    outline: none
</style>